<template>
  <view class="feedback-container">
    <!-- 头部 -->
    <view class="header">
      <text class="title">意见反馈</text>
    </view>

    <!-- 功能按钮 -->
    <view class="action-buttons">
      <button class="action-btn primary" @click="goToAddFeedback">
        <text class="btn-icon">📝</text>
        <text class="btn-text">添加反馈</text>
      </button>
      
      <button class="action-btn secondary" @click="goToPendingFeedbacks">
        <text class="btn-icon">⏳</text>
        <text class="btn-text">未处理反馈</text>
        <view v-if="pendingCount > 0" class="badge">{{ pendingCount }}</view>
      </button>
      
      <button class="action-btn secondary" @click="goToResolvedFeedbacks">
        <text class="btn-icon">✅</text>
        <text class="btn-text">已处理反馈</text>
        <view v-if="resolvedCount > 0" class="badge">{{ resolvedCount }}</view>
      </button>
    </view>

    <!-- 反馈统计 -->
    <view class="stats-section">
      <view class="stats-title">反馈统计</view>
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-number">{{ totalCount }}</text>
          <text class="stat-label">总反馈数</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ pendingCount }}</text>
          <text class="stat-label">待处理</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ resolvedCount }}</text>
          <text class="stat-label">已处理</text>
        </view>
      </view>
    </view>

    <!-- 最近反馈 -->
    <view class="recent-section">
      <view class="section-header">
        <text class="section-title">最近反馈</text>
        <text class="view-all" @click="goToAllFeedbacks">查看全部</text>
      </view>
      
      <view v-if="loading" class="loading">
        <text>加载中...</text>
      </view>
      
      <view v-else-if="recentFeedbacks.length === 0" class="empty">
        <text>暂无反馈记录</text>
      </view>
      
      <view v-else class="feedback-list">
        <view 
          v-for="feedback in recentFeedbacks" 
          :key="feedback.id" 
          class="feedback-item"
          @click="goToFeedbackDetail(feedback.id)"
        >
          <view class="feedback-header">
            <text class="feedback-content">{{ feedback.content }}</text>
            <view class="status-badge" :class="getStatusClass(feedback.status)">
              {{ getStatusText(feedback.status) }}
            </view>
          </view>
          
          <view class="feedback-meta">
            <text class="feedback-time">{{ formatTime(feedback.createdAt) }}</text>
            <text v-if="feedback.adminRealName" class="feedback-admin">
              反馈给：{{ feedback.adminRealName }}
            </text>
          </view>
          
          <view v-if="feedback.adminReply" class="admin-reply">
            <text class="reply-label">管理员回复：</text>
            <text class="reply-content">{{ feedback.adminReply }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Feedback',
  data() {
    return {
      loading: false,
      recentFeedbacks: [],
      totalCount: 0,
      pendingCount: 0,
      resolvedCount: 0
    }
  },
  
  onLoad() {
    this.fetchFeedbackStats()
  },
  
  methods: {
    // 获取反馈统计信息
    async fetchFeedbackStats() {
      const token = uni.getStorageSync('token')
      if (!token) {
        uni.showModal({
          title: '提示',
          content: '请先登录后再查看反馈',
          showCancel: false,
          confirmText: '去登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/login'
              })
            }
          }
        })
        return
      }

      this.loading = true
      try {
        const response = await uni.request({
          url: 'http://localhost:8080/feedback/list',
          method: 'GET',
          header: {
            'Authorization': `Bearer ${token}`
          }
        })

        if (response.data.code === 200) {
          const feedbacks = response.data.data || []
          this.recentFeedbacks = feedbacks.slice(0, 3) // 只显示最近3条
          this.totalCount = feedbacks.length
          
          // 统计各状态数量
          this.pendingCount = feedbacks.filter(f => f.status === 'PENDING').length
          this.resolvedCount = feedbacks.filter(f => f.status === 'RESOLVED').length
        } else {
          console.error('获取反馈列表失败:', response.data)
        }
      } catch (error) {
        console.error('获取反馈列表错误:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    // 跳转到添加反馈页面
    goToAddFeedback() {
      uni.navigateTo({
        url: '/pages/feedback/add-feedback'
      })
    },

    // 跳转到未处理反馈页面
    goToPendingFeedbacks() {
      uni.navigateTo({
        url: '/pages/feedback/pending-feedbacks'
      })
    },

    // 跳转到已处理反馈页面
    goToResolvedFeedbacks() {
      uni.navigateTo({
        url: '/pages/feedback/resolved-feedbacks'
      })
    },

    // 跳转到所有反馈页面
    goToAllFeedbacks() {
      uni.navigateTo({
        url: '/pages/feedback/all-feedbacks'
      })
    },

    // 跳转到反馈详情页面
    goToFeedbackDetail(feedbackId) {
      uni.navigateTo({
        url: `/pages/feedback/feedback-detail?id=${feedbackId}`
      })
    },

    // 获取状态样式类
    getStatusClass(status) {
      switch (status) {
        case 'PENDING': return 'status-pending'
        case 'PROCESSING': return 'status-processing'
        case 'RESOLVED': return 'status-resolved'
        case 'REJECTED': return 'status-rejected'
        default: return 'status-default'
      }
    },

    // 获取状态文本
    getStatusText(status) {
      switch (status) {
        case 'PENDING': return '待处理'
        case 'PROCESSING': return '处理中'
        case 'RESOLVED': return '已解决'
        case 'REJECTED': return '已拒绝'
        default: return '未知'
      }
    },

    // 格式化时间
    formatTime(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      const now = new Date()
      const diff = now - date
      
      if (diff < 60000) { // 1分钟内
        return '刚刚'
      } else if (diff < 3600000) { // 1小时内
        return Math.floor(diff / 60000) + '分钟前'
      } else if (diff < 86400000) { // 1天内
        return Math.floor(diff / 3600000) + '小时前'
      } else {
        return `${date.getMonth() + 1}-${date.getDate()}`
      }
    }
  }
}
</script>

<style scoped>
.feedback-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.header {
  text-align: center;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 30rpx;
  /* 可以给容器设置最大宽度限制，避免按钮过宽 */
  max-width: 600rpx;
  /* 居中显示按钮组 */
  margin-left: auto;
  margin-right: auto;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx;
  border-radius: 12rpx;
  border: none;
  /* 让按钮占满父容器宽度 */
  width: 100%;
  /* 可以根据需要调整最小宽度 */
  min-width: 300rpx;
}
.action-btn.primary {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
}

.action-btn.secondary {
  background-color: white;
  color: #666;
  border: 2rpx solid #e0e0e0;
}

.btn-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.btn-text {
  font-size: 28rpx;
  font-weight: 500;
}

.badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background-color: #ff4757;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 12rpx;
  min-width: 24rpx;
  text-align: center;
}

.stats-section {
  background-color: white;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.stats-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.stats-grid {
  display: flex;
  justify-content: space-around;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #4CAF50;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

.recent-section {
  background-color: white;
  border-radius: 12rpx;
  padding: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.view-all {
  font-size: 24rpx;
  color: #4CAF50;
}

.loading, .empty {
  text-align: center;
  padding: 40rpx;
  color: #999;
}

.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.feedback-item {
  padding: 20rpx;
  border: 2rpx solid #f0f0f0;
  border-radius: 8rpx;
  background-color: #fafafa;
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12rpx;
}

.feedback-content {
  flex: 1;
  font-size: 26rpx;
  color: #333;
  line-height: 1.4;
  margin-right: 12rpx;
}

.status-badge {
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  white-space: nowrap;
}

.status-pending {
  background-color: #fff3cd;
  color: #856404;
}

.status-processing {
  background-color: #d1ecf1;
  color: #0c5460;
}

.status-resolved {
  background-color: #d4edda;
  color: #155724;
}

.status-rejected {
  background-color: #f8d7da;
  color: #721c24;
}

.feedback-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.feedback-time {
  font-size: 22rpx;
  color: #999;
}

.feedback-admin {
  font-size: 22rpx;
  color: #666;
}

.admin-reply {
  padding: 12rpx;
  background-color: #e8f5e8;
  border-radius: 6rpx;
  border-left: 4rpx solid #4CAF50;
}

.reply-label {
  font-size: 22rpx;
  color: #4CAF50;
  font-weight: 500;
}

.reply-content {
  font-size: 24rpx;
  color: #333;
  margin-top: 4rpx;
  display: block;
}
</style>
